<template>
    <div class="reviewsDetails">
        <el-card class="bottom10 header-card">
            <div class="flex-space-between">
                <div class="div-pointer flex-center" @click="goBack">
                    <svg-icon name="icon-return" svgClass='return-svg' /> <span class="fontB">评测详情</span>
                </div>
                <div class="fColor60">
                    位置：广东省广州天河区天河路518号
                </div>
            </div>
        </el-card>
        <el-card class="bottom10">
            <div class="flex-space-between">
                <div class="flex-center fColor60">
                    <svg-icon name="icon-unicom" svgClass='unicom-svg' />
                    <p class="mr14">测评网络:</p><span class="font18 fontB">联通 5G</span>
                </div>
                <div class="fColor60">
                    2020/08/24 15:24
                </div>
            </div>
            <div class="background-content">
                <p class="fColor60 fontB">型号强度 <span class="fColor1CD">（优）</span></p>
            </div>
            <div class="show-content">
                <div>
                    <p>RSRP<span>-93</span></p>
                </div>
                <div>
                    <p>RSRP<span>-95</span></p>
                </div>
                <div>
                    <p>RSRQ<span>-12</span></p>
                </div>
                <div>
                    <p>SINR<span>10</span></p>
                </div>
            </div>
            <div class="background-content">
                <p class="fColor60 fontB">宽带测速 <span class="fColor1CD">（极好）</span></p>
            </div>
            <div class="chart-content">
                <div class="content-div">
                    <div>
                        <p style='height:29px'>
                            <svg-icon name='icon-download' svgClass='download-svg' />
                        </p>

                        <p>下载 Mbps<span>350.6</span></p>
                    </div>
                    <div>
                        <p style='height:29px'>
                            <svg-icon name='icon-upload' svgClass='download-svg' />
                        </p>
                        <p>上传 Mbps<span>333.3</span></p>
                    </div>
                </div>
                <div class="chart-div">
                    <content-line :seriesData='arriveDataList' :styles=" { width: '100%', height: '124px' }" :areaColor='areaColor' :xName='lossXName' />
                </div>
            </div>
            <div class="background-content">
                <p class="fColor60 fontB">终端到云端服务 <span class="fColor1CD">（优）</span></p>
            </div>
            <div class="show-content">
                <div>
                    <p>时延ms<span>26.4</span></p>
                </div>
                <div>
                    <p>丢包%<span>0.08</span></p>
                </div>
                <div>
                    <p>抖动ms<span>4</span></p>
                </div>
            </div>
        </el-card>
        <el-card class="bottom10">
            <div class="flex-space-between">
                <div class="flex-center fColor60">
                    <svg-icon name="icon-wifi" svgClass='unicom-svg' />
                    <p class="mr14">WiFi HiFi**2011</p><span class="font18 fontB">MAC:50-EB-71-b1-5F-C1</span>
                </div>
                <div class="fColor60">
                    2020/08/24 15:24
                </div>
            </div>
            <div class="background-content">
                <p class="fColor60 fontB">型号强度 <span class="fColorFF99">（中）</span></p>
            </div>
            <div class="show-content">
                <div>
                    <p>RSRP<span>-93</span></p>
                </div>
                <div>
                    <p>RSRP<span>-95</span></p>
                </div>
                <div>
                    <p>RSRQ<span>-12</span></p>
                </div>
                <div>
                    <p>SINR<span>10</span></p>
                </div>
            </div>
            <div class="background-content">
                <p class="fColor60 fontB">宽带测速 <span class="fColorFF99">（一般）</span></p>
            </div>
            <div class="chart-content">
                <div class="content-div">
                    <div>
                        <p style='height:29px'>
                            <svg-icon name='icon-download' svgClass='download-svg' />
                        </p>

                        <p>下载 Mbps<span>350.6</span></p>
                    </div>
                    <div>
                        <p style='height:29px'>
                            <svg-icon name='icon-upload' svgClass='download-svg' />
                        </p>
                        <p>上传 Mbps<span>333.3</span></p>
                    </div>
                </div>
                <div class="chart-div">
                    <content-line :seriesData='arriveDataList' :styles=" { width: '100%', height: '124px' }" :xName='lossXName' />
                </div>
            </div>
            <div class="show-content" style='margin-top:20px'>
                <div>
                    <p>时延ms<span>26.4</span></p>
                </div>
                <div>
                    <p>丢包%<span>0.08</span></p>
                </div>
                <div>
                    <p>抖动ms<span>4</span></p>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ContentLine from 'comps/chart/line/contentLine.vue';
import SvgIcon from 'svgIcon/SvgIcon.vue';
export default defineComponent({
    name: 'reviewsDetails',
    components: { SvgIcon, ContentLine },
    setup() {
        // 获取路由
        const route = useRoute();
        //路由调准啊
        const router = useRouter();
        const id = route.params;
        // 获取页面传值
        console.log(id);
        const data: any = reactive({
            // 返回
            goBack: () => {
                router.go(-1);
            }
        });

        const arriveDataList: Array = reactive([
            {
                name: '下载 Mbps',
                data: [40, 50, 55, 40, 55, 43, 60, 53, 60, 55, 65, 70],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '上传 Mbps',
                data: [20, 30, 25, 35, 40, 37, 30, 37, 30, 40, 44, 40],
                type: 'line',
                smooth: true,
                symbol: 'none'
            }
        ]);
        const lossXName = ref(['2009/6/12 1:01', '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00']);
        const areaColor = ref(['#54cd9b', '#f7bd64']);
        return {
            arriveDataList,
            lossXName,
            areaColor,
            ...toRefs(data)
        };
    }
});
</script>

<style lang="scss" scoped>
.reviewsDetails {
    .height14 {
        height: 14px !important;
    }
    .fColor60 {
        color: #606266;
    }
    .fColor1CD {
        color: #1cd689;
    }
    .fColorFF99 {
        color: #ff9900;
    }
    .header-card {
        .el-card__body {
            height: 14px !important;
        }
    }
    .font18 {
        font-size: 18px;
    }
    .mr14 {
        margin-right: 14px;
    }
    .fontB {
        font-weight: bold;
    }
    .background-content {
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin: 20px 0;
        background-color: #f2f5f9;
    }
    .show-content {
        height: 22px;
        display: flex;
        align-items: center;
        div {
            width: 230px;
            border-right: 1px solid #ebeef5;
            display: flex;
            justify-content: center;
            p {
                @extend .fColor60;
                span {
                    margin-left: 20px;
                    font-size: 22px;
                    font-family: Microsoft YaHei(Regular);
                    color: #303133;
                }
            }
        }
        div:last-child {
            border-right: none;
        }
    }
    .chart-content {
        display: flex;
        width: 100%;
        .content-div {
            width: 230px;
            div {
                display: flex;
                align-items: center;
                height: 62px;
                p:first-child {
                    width: 51px;
                    height: 29px;
                    padding-top: 13px;
                }
                p {
                    width: 179px;
                    @extend .fColor60;
                    span {
                        margin-left: 20px;
                        font-family: Microsoft YaHei(Regular);
                        font-size: 22px;
                        color: #303133;
                    }
                }
            }
        }
        .chart-div {
            width: 100%;
        }
    }
}
</style>
<style  lang="scss">
.reviewsDetails {
    .header-card {
        .el-card__body {
            height: 14px !important;
            line-height: 14px !important;
        }
    }
    .div-pointer {
        cursor: pointer;
    }
}
</style>